import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { useAppSelector } from '@/store'
import { RecommendWrapper } from './style'
import SectionHeaderV1 from '@/components/section-header-v1'
import SectionItemV1 from '@/components/section-item-v1'

interface IProps {
  children?: ReactNode
}

const HotRecommend: React.FC<IProps> = () => {
  const keywords = ['华语', '流行', '摇滚', '民谣', '电子']
  const { hotRecommends } = useAppSelector((state) => ({
    hotRecommends: state.recommend.hotRecommend
  }))


  return (
    <div>
      {/* <div>热门推荐专区</div> */}
      <RecommendWrapper>
        <SectionHeaderV1
          title="热门推荐"
          keywords={keywords}
          morePath="/discover/songs"
        />
        <div className="recommend-list">
          {hotRecommends.slice(0, 8).map((item) => {
            return <SectionItemV1 info={item} key={item.id}/>
          })}
        </div>
      </RecommendWrapper>
    </div>
  )
}

export default memo(HotRecommend)
